<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <title>访客预约</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/login.css" media="all">
    <script>
        if (window != top)
            top.location.replace(location.href);
    </script>
    <style>
        .layui-input, .layui-textarea {
            display: block;
            width: 78%;
            padding-left: 10px;
        }
        .login-body .layui-form-pane .layui-form-label {
            width: 108px;
        }
    </style>
</head>

<body>
<div class="login-wrapper">

    <div class="login-header">
        <img src="${pageContext.request.contextPath}/assets/images/logo.png">访客管理系统
    </div>

    <div class=" login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;访客预约:请填写预约信息
            </div>
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">访客姓名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="visitorName" autocomplete="off" placeholder="请输入访客姓名" class="layui-input"  lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号:</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" id="phone" autocomplete="off" placeholder="请输入访客手机号" class="layui-input"  lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">被访人姓名:</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" autocomplete="off" placeholder="请输入被访人姓名" class="layui-input"  lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">被访人电话:</label>
                    <div class="layui-input-block">
                        <input type="text" name="userPhone" autocomplete="off" placeholder="请输入被访人电话" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预约日期:</label>
                    <div class="layui-input-block">
                        <input type="text" name="appointmentTime" id="appointmentTime" autocomplete="off" placeholder="请输入预约日期" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">预约事由:</label>
                    <div class="layui-input-block">
                        <input type="text" name="reasons" id="reasons" autocomplete="off" placeholder="请输入预约事由" class="layui-input" lay-verify="required">
                    </div>
                </div>

                <div class="layui-form-item">
                    <button lay-filter="subscribe-submit" class="layui-btn layui-btn-fluid" lay-submit>预 约 申 请</button>
                </div>
            </form>
        </div>
    </div>

    <div class="login-footer">
        <p>© 2020 访客管理系统</p>
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/assets/libs/layui/layui.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).use(['form','laydate'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;

        laydate.render({
            elem: '#appointmentTime'
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH点'
        });


        // 表单提交
        form.on('submit(subscribe-submit)', function (obj) {
            layer.load(2);
            $.post('${pageContext.request.contextPath}/visitorManager/addVisitor', obj.field, function (data) {
                var result = eval(data);
                if (200 == result.status) {
                    layer.msg('预约成功', {icon: 1, time: 1500}, function () {
                        var phone=$("#phone").val();
                        window.location.href='${pageContext.request.contextPath}/visitorManager/subscribeList/'+phone;
                    });
                } else if (300 == result.status) {

                    layer.closeAll('loading');
                    layer.msg('预约失败，预约对象暂不存在', {icon: 5});
                }else{
                    layer.closeAll('loading');
                    layer.msg('预约失败', {icon: 5});
                }
            }, 'JSON');
            return false;
        });
    });
</script>
</body>
</html>